<template>
  <div>
    <h2>用户-理财列表</h2>
    <table class="table table-bordered">
        <tr>
          <td>理财ID</td>
          <td>理财名称</td>
          <td>年收益</td>
          <td>利息</td>
          <td>最低金额</td>
          <td>理财人次</td>
          <td>风险等级</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in list">
          <td>{{ item.F_id }}</td>
          <td>{{ item.F_name }}</td>
          <td>{{ item.F_yearPrice }}</td>
          <td>{{ item.FT_name }}</td>
          <td>{{ item.minPrice }}</td>
          <td>{{ item.F_num }}</td>
          <td>{{ item.F_Grade}}</td>
          <td>
            <input type="button" @click="finance(item.F_id)" value="理财" class="btn btn-warning">
          </td>
        </tr>
    </table>
    <input type="text" v-model="info.pageindex" size="2">
    <input type="button" value="Go" @click="SHow()" class="btn btn-primary">
    &nbsp;<select v-model="info.pagesize" @change="SHow()">
      <option value="2">每页显示2条</option>
      <option value="3">每页显示3条</option>
      <option value="5">每页显示5条</option>
    </select>&nbsp;
    
    <input type="button" @click="page(1)" value="首页" class="btn btn-primary">&nbsp;
    <input type="button" @click="page(info.pageindex-1)" value="上一页" class="btn btn-primary">&nbsp;
    <input type="button" @click="page(info.pageindex+1)" value="下一页" class="btn btn-primary" >&nbsp;
    <input type="button" @click="page(info.pagecount)" value="尾页" class="btn btn-primary" >
  </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter()

const list = ref([{
    F_id:0,
    F_name:'',
    F_yearPrice:0,
    FT_name:'',
    minPrice:0,
    F_num:0,
    F_Grade:''
}]) 


const info=ref({
  pageindex:1,
  pagesize:3,
  count:0,
  pagecount:0,
})

onMounted(()=>{
  SHow()
})

const finance=(F_id:any)=>{
  router.push({path:'/UserFinanceList',query:{F_id:F_id}})
}


const page=(num:any)=>{
  if(num>=1&&num<=info.value.pagecount){
    info.value.pageindex=num
    SHow()
  }
}

const SHow=()=>{
  axios({
    url:'http://localhost:59121/api/Finance/GetFinanceShow',
    method:'get',
    params:{
      pageindex:info.value.pageindex,
      pagesize:info.value.pagesize
    }
  })
  .then(res=>{
    list.value=res.data.pageOrder
    info.value.count=res.data.count
    info.value.pagecount=res.data.pagecount
  })
  .catch(err=>{
    console.log(err)
  })
}

</script>